/*=== Helpdesk screen CSS ===*/
.tabs_panel.helpdesk .item.helpdesk {
	display: inline-block;
	color: #3D3D3D;
	font-size: 16pt;
	margin: 16px 0 0 14px;
	padding: 4px 10px;
	text-shadow: 0 1px 0 #FFFFFF;
	vertical-align: top;
}

.HelpdeskLayout {

	.panels {
		.box-sizing;
		padding-left: 14px;
		width: 100%;

		html.rtl & {
			padding-left: 0px;
			padding-right: 14px;
		}

		.panel_helper {
			width: 100%;
		}
	}

	.AgentArea .panel .panel_content {
		.resize_compensation_top(0px);
	}

	.AgentArea .panel.threads {

		.toolbar {
			background: none;
			filter: none;
			border: 0px;
			border-radius: 0px;
			//margin-left: 16px;

			html.rtl & {
				margin-left: 0px;
				margin-right: 16px;
			}

			.content {
				padding: 0px;
			}

			.checkmail {
				float: none;
				padding: 0px;
				border-radius: 0px;
				border: 0px;
				box-shadow: none;
				background: none;
				//margin: 4px 0px 0px 8px;

				//html.rtl & {
					//margin: 4px 8px 0px 0px;
				//}
			}

			.new_request {
				margin-right: 0px;
				
				.icon {
					display: none;
				}

				.text {
					display: inline-block;
				}
			}
		}

		.panel_top {
			border-radius: 5px 5px 0px 0px;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 15px;
			padding-right: 40px;
			background: url("") repeat scroll 0 0 #F1F1F1;
			
			html.rtl & {
				padding-right: 15px;
				padding-left: 40px;
			}
		}
	}

	.panel.threads .toolbar .checkmail:hover {
		background: none;
	}

	.UserArea {

		.panel.threads .toolbar {

			.new_request {
				display: inline-block;
				min-width: 200px;
			}

			.text {
				display: inline-block;
			}

			.icon {
				display: none;
			}
		}
	}
}

.panel.threads .middle_bar {
	.resize_compensation_top(53px);
	.resize_compensation_bottom(41px);

	.HelpdeskLayout .UserArea & {
		.resize_compensation_top(0px);
		.resize_compensation_bottom(0px);

		border-radius: 5px 0px 5px 5px;
		box-shadow: -1px 0 4px rgba(0, 0, 0, 0.23);
		background: #fff;
		overflow: hidden;
	}
}


.panel.thread_viewer {

	.panel_center {

		.thread_content > .buttons {
			padding: 0px 20px 18px 18px;
			margin: 0px;

			.button {
				padding: 7px 11px;
			}
		}
		.thread_content > .buttons.no_posts {
			padding-top: 18px;
		}

		/*.thread_content > .posts .quote{
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			background: pink;
		}*/

		.buttons .new_post {
			float: left;

			html.rtl & {
				float: right;
			}
		}
	}

	.new_request {

		.fields {
			padding: 16px;

			.input {
				font-size: 10pt;
				width: 100%;
				min-height: 200px;
			}

			.buttons {
				text-align: left;
				margin: 15px 0px 20px;
				padding: 0px;

				.button.create {
					margin-right: 6px;
					padding: 5px 12px;
				}

				.button.upload {
					.transition(~"background 500ms ease, border-color 500ms ease");

					float: right;
					background: #FFFDD6;
					border: 0px solid #fff;
					background: none;
					color: #555;
					text-shadow: none;
					font-weight: normal;
					margin: 3px;

					&.dragOver {
						margin: 0px;
						background: #FFFDD6;
						border: 3px dashed #EFE164;
					}

					.icon {
						display: inline-block;
						vertical-align: middle;
						width: 16px;
						height: 16px;
						background: url("images/sprites.png?%VERSION%") no-repeat -120px -120px;
					}
				}
			}
		}

		.placeholder {
			font-size: 10pt;
			padding-top: 6px;
			text-indent: 9px;
		}


	}

	.uploader_mask {
		.box-sizing;
		.transition(opacity 250ms ease 0s);

		background: #FFFDD6;
		padding: 11px;
		color: #D3B910;
		font-size: 18pt;
		text-align: center;
		opacity: 0;
		position: absolute;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		min-height: 100%;
		visibility: hidden;

		&.active {
			visibility: visible;
			opacity: 0.5;
		}

		.inner {
			.box-sizing;

			height: 100%;
			border: 3px dashed #E2DA36;
			border-radius: 5px;
		}
	}

	.toolbar {

		.watcher, .watcher:hover
		{
			background: #EBE5E5;
			border-color: #EBE5E5;
			box-shadow: none;
			cursor: default;
		}

		.from .link {
			margin-left: 5px;
		}
	}

	.panel_content {
		margin: 0px !important;
		padding: 0px !important;
	}

	.middle_bar {
		.resize_compensation_top(76px);
		.resize_compensation_bottom(92px);

		&.new_request {
			.resize_compensation_top(0px);
			.resize_compensation_bottom(57px);
		}

		&.own_thread {
			.resize_compensation_top(57px);
		}
	}

	.panel_top {
		padding: 14px 18px !important;

		.subject {
			min-height: 1.3em;
		}

		.title {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 4px 0px;
			padding: 0;
			font-size: 12pt;
			font-weight: normal;

			&.has_contactcard {
				position: relative;
				left: -11px;
			}

			&.expand {
				position: relative;
				overflow: visible;
			}

			.text {
				overflow: hidden;
				padding: 4px 4px 0;
				position: relative;
				top: -4px;
				display: block;
			}

			.founded {
				padding-left: 7px;
			}

			.link {
				font-size: 9pt;
				display: inline-block;
				margin: 0px 10px;
			}
		}

		.link.cancel {
			float: right;
			margin-top: 8px;
		}
	}

	.panel_bottom {
		height: auto;
		border: 0px;
		border-radius: 0px;
	}

	.panel_center {
		background: #F9F9F9;

		.link.more {
			margin: 17px 37px 0px;
		}
	}

	.toolbar {
		float: right;
		background: none;
		filter: none;
		border-bottom: 0px;

		html.rtl & {
			float: left;
		}

		.content {
			padding: 0px;
		}
	}

	.post {
		font-size: 11pt;
		margin: 18px 20px 18px 18px;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 4px;
		overflow: hidden;
		box-shadow: 0px 0px 0px #CCCCCC;

		.transition(all 600ms linear);

		&.unseen {
			box-shadow: -1px 3px 4px 0 #ddd;

			-webkit-transform: translate(0px, -3px);
			-moz-transform: translate(0px, -3px);
			-ms-transform: translate(0px, -3px);
			transform: translate(0px, -3px);
		}

		.attachments {
			margin: 0px 18px;
			padding: 10px 0px;
			border-top: 1px solid #EDE6D0;

			.attachment {
				margin: 14px 20px 0 0;
				font-size: 9pt;

				.download {
					cursor: pointer;
				}
			}
		}
	}

	.post {

		.header {
			padding: 12px 18px 0px;

			.name {
				font-size: 13pt;
			}

			.close {
				float: right;
				display: inline-block;
				height: 10px;
				width: 10px;
				cursor: pointer;
				visibility: hidden;
				color: #8B8B8B;
				font-size: 12px;
				margin: 2px -6px 0 10px;
				
				html.rtl & {
					float: left;
					margin-left: -6px;
					margin-right: 10px;
				}
				
				.iconFontInit();
				&:before {
					content: "\e63e";
				}
			}

			.date {
				float: right;
				
				font-size: 9pt;

				html.rtl & {
					float: left;
				}
			}

			.link {
				font-size: 9pt;
			}
		}

		&:hover .close.canBeDeleted {
			visibility: visible;
		}

		.content {
			padding: 10px 19px 16px;
		}

		code, .code {
			white-space: pre;
			border: 1px dashed #B6AD9E;
			font-size: 12px;
			overflow: auto;
			padding: 8px;
		}

		&.request {
			.header .link {
				color: #B2B2B2;
			}

			.content {
				color: #656565;
			}

			&.unseen .content {
				color: #000000;
			}
		}

		&.response {
			background: #FEFFE7;
			position: relative;

			.header .link {
				color: #BAAE77;
			}

			.content {
				color: #716D51;
			}

			&.unseen .content {
				color: #000000;
			}
		}

		&.internal {
			background: #F8FFE6;
			margin-left: 100px;

			.header .link {
				font-size: 9pt;
				color: #9DBF7A
			}

			.content {
				padding-left: 100px;
				color: #647151;
			}

			&.unseen .content {
				color: #000;
			}

			.content::before {
				float: left;
				background: url("images/sprites.png?%VERSION%") repeat -280px -200px;
				content: "";
				width: 60px;
				height: 40px;
				margin-left: -80px;
				opacity: 0.3;
			}
		}
	}

	.quick_reply {
		max-height: 344px;

		&.internal {
			background: #F8FFE6;
		}

		&.hidden {
			max-height: 0px;
		}

		.buttons .button.upload {
			float: right;
			background: #FFFDD6;
			border: 0px solid #fff;
			background: none;
			color: #555;
			text-shadow: none;
			font-weight: normal;
			margin: 3px;
			.transition(~"background 500ms ease, border-color 500ms ease");

			html.rtl & {
				float: left;
			}

			&.dragOver {
				margin: 0px;
				background: #FFFDD6;
				border: 3px dashed #EFE164;
			}

			.icon {
				display: inline-block;
				vertical-align: middle;
				width: 16px;
				height: 16px;
				background: url("images/sprites.png?%VERSION%") no-repeat -120px -120px;
			}
		}

		&.active .attachments {
//			max-height: 73px
			max-height: initial;

			.name {
				white-space: normal;
			}
		}
	}

	.quick_reply,
	.new_request {

		.attachments {
			padding: 0px;

			.attachment {
				margin: 0px;
				padding-right: 10px;
				.box-sizing();
			}

			.item_content {
				background: #ffffff;
			}

			.image {
				min-height: 65px;

				.text {
					margin: 0px;
				}
			}

			.buttons {
				margin: 6px 0px 0px;

				.button {
					margin: 0px;
				}
			}

			.count2 .attachment { max-width: 50%; }
			.count3 .attachment { max-width: 33%; }
			.count4 .attachment { max-width: 25%; }
			.count5 .attachment { max-width: 20%; }
		}
	}
}

.panel.threads {
	width: 40%;

	.panel_top .search_block {
		padding-left: 10px;
		padding-right: 5px;
		
		html.rtl {
			padding-left: 5px;
			padding-right: 10px;
		}
	}

	.items_list .item {

		.item_content {
			padding-left: 16px;
		}

		& .subject,
		& .from {
			display: block;
			overflow: hidden;
		}

		.from {
			font-weight: bold;
		}

		.subtitle {
			color: #606060;
			font-size: 11pt;

			.HelpdeskLayout .UserArea & {
				font-size: 13pt;
				font-weight: normal;
			}
		}

		&.selected .subtitle {
			color: #fff;
		}

		.separator {
			display: block;
		}

		.state {
			float: right;
			display: inline-block;
			padding: 2px 6px;
			border-radius: 4px;
			margin-left: 6px;
		}

		&.resolved .state {
			background: #B3EE90;
			color: #587848;
			border: 1px solid #BFE6A9;
		}

		&.pending .state,
		&.deferred .state  {
			background: #F5F593;
			color: #9F742B;
			border: 1px solid #EEEDA8;
		}

		&.answered .state,
		&.waiting .state {
			background: #DCDCDC;
			color: #707070;
			border: 1px solid #D7D7D7;
		}
	}

	.panel_bottom {
		padding: 8px 14px 6px;

		a {
			display: inline-block;
			margin-right: 10px;

			&.selected,
			&.selected:hover {
				background: #fff;
				border-radius: 4px;
				padding: 4px 9px;
				color: #3d3d3d;
				text-decoration: none;
				cursor: default;
				outline: none;

				border: 1px solid #e0e0e0;
				box-shadow: 0 2px 2px #E7E7E7 inset;
			}
		}

		.pagination {
			float: right;
		}
	}
}

.HelpdeskLayout {

	.settings .panel .fieldset .buttons {
		text-align: left;
	}

	.details {
		border-bottom: 1px solid #EDEDED;
		background: #FFFFEB;
	}

	.details_content {
		padding: 10px 18px;
	}

	.external_content {
		border: 0px;
		display: block;
		width: 100%;
		height: 200px;
	}

	.products {
		margin-top: 10px;

		.product {
			border-bottom: 1px solid #EDEDED;

			& > .title {
				margin-bottom: 10px;
			}

			.icon {
				display: inline-block;
				vertical-align: middle;
				width: 31px;
				height: 31px;
				margin-right: 4px;
				background: url("images/sprites.png?%VERSION%") no-repeat -400px -411px;
			}

			.name {
				font-size:12pt;
			}

			.buttons {
				text-align: left;
			}

			.licenses,
			.keys {
				margin: 0px 0px 16px 35px;
			}

			.licenses .license {
				display: inline-block;
				background: #4AA14A;
				border: 1px solid #2A912A;
				border-radius: 3px;
				color: #fff;
				padding: 2px 6px;
				line-height: 100%;
			}

			.keys {
				.title {
					margin-bottom: 6px;
				}

				.key {
					margin: 0px 0px 4px 10px;
				}

				.text {
					font-size: 11pt;
					color: #000;
					font-style: italic;
				}

				.buttons {
					margin-top: 4px;
				}
			}
		}
	}
	
	.login_panel {
		width: 100%;
		max-width: 800px;
	}
}
/*=== END Helpdesk screen CSS ===*/